<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>Frame Controller 演示</title>
    <style type="text/css">
    html {}

    body {
        margin: 0;
        background: #FAFAFA;
    }

    h2 {
        text-align: center;
        font-family: 'Microsoft Yahei';
    }

    .frame-list {}

    .frame-item {
        float: left;
        margin: 5px;
        background: #C00;
        border: solid 1px #B00;
        width: 500px;
        border-radius: 2px;
    }

    .frame-title {
        line-height: 35px;
        height: 35px;
        padding: 0 5px;
        color: #FFF;
    }

    .frame-close {
        float: right;
        color: #FFF;
        border: solid 1px #800;
        background: #900;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        margin: 5px;
        font-family: 'Arial Blank';
        cursor: pointer;
        border-radius: 1px;
    }

    .frame-body {
        padding: 0 5px 3px;
    }

    .frame-body iframe {
        width: 100%;
        height: 300px;
        border: 0;
        border-radius: 2px;
        background: #FFF;
    }
    </style>
    <script type="text/javascript" src="../src/FrameController.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

<body>
    <h2>Frame Controller 演示 <button class="btn-create" type="button">新增窗口</button></h2>
    <div class="frame-list"> </div>
    <script type="text/template" id="tpl">
        <div class="frame-item">
            <div class="frame-title">
                <span class="frame-close">X</span>
                <b>#TITLE#</b>
            </div>
            <div class="frame-body">
                <iframe src="#URL#"></iframe>
            </div>
        </div>
    </script>
    <script type="text/javascript">
    $(function() {
        var frameCount = 0,
            frameTemplate = $('#tpl').html();

        $('.btn-create').click(function() {
            frameCount++;
            title = 'Frame_' + frameCount;
            url = 'pages/page.html';
            $('.frame-list').append(
                frameTemplate
                .replace('#TITLE#', title)
                .replace('#URL#', url)
            ).find('.frame-item:last').css({
                left: 410 * (frameCount - 1) + 15 + 'px'
            }).find('.frame-close').click(function() {
                $(this).parent().parent().remove();
            });
        }).click().click();
    });
    </script>
</body>

</html>